<template>
  <div class="clearfix">
    <div class="userInfo-left">
      <img :src="userData.avatar" alt="" @click="emits('openModal', userData.avatar)" />
    </div>
    <div class="userInfo-right">
      <div>
        <div class="userInfo-right__remark">
          {{ userData.remark ? userData.remark : userData.nickName }}
        </div>
        <span class="userInfo-right__gender">
          <SvgIcon v-if="userData.sex === '男'" icon-class="man" />
          <SvgIcon v-else icon-class="woman" />
        </span>
        <span v-if="userData.address"
          ><SvgIcon style="margin: 0 5px" icon-class="cake" /><span
            class="userInfo-right__age--has"
            >{{ userData.age }}</span
          ></span
        >
      </div>
      <p class="userInfo-right__nickName" v-if="userData.remark">
        昵称：{{ userData.nickName }}
      </p>
      <p class="userInfo-right__account">账号：{{ userData.userId }}</p>
      <p class="userInfo-right__area" v-if="userData.address">
        地区：{{ userData.address }}
      </p>
      <p class="userInfo-right__age--nohas" v-else>年龄：{{ userData.age }}</p>
    </div>
  </div>
  <div class="userInfo-right__signature" v-if="userData.signature">
    <span>个性签名</span>
    <span>{{ userData.signature }}</span>
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  userData: User;
}>();

const emits = defineEmits<{
  (e: "openModal", src: string): void;
}>();
</script>

<style lang="scss" scoped>
.userInfo {
  &-left {
    @include setWidHei(60px, 60px);
    float: left;
    border-radius: 4px;

    img {
      object-fit: cover;
      @include setWidHei(100%, 100%);
      border-radius: 4px;
      cursor: pointer;
    }
  }

  &-right {
    float: left;
    margin-left: 15px;

    & > div:first-child {
      display: flex;
      align-items: flex-start;
    }

    &__remark {
      display: inline-block;
      max-width: 86px;
      word-break: break-all;
      font: {
        weight: 600;
        size: 15px;
      }
    }

    &__gender {
      color: #3d93ef;
      margin-left: 3px;
    }

    &__age--has {
      font-size: 13px;
    }

    &__area {
      max-width: 150px;
      word-break: break-all;
    }

    &__account,
    &__area,
    &__nickName,
    &__age--nohas {
      margin: 3px 0 3px;
      font-size: 12px;
      color: #626161ca;
    }

    &__signature {
      position: relative;
      font-size: 13px;
      margin-top: 20px;
      word-break: break-all;
      color: #333;
      max-width: 230px;

      span:first-child {
        color: rgba(128, 124, 124, 0.909);
        margin-right: 15px;
        width: 55px;
        display: inline-block;
      }

      &::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        height: 1px;
        background-image: linear-gradient(
          to right,
          rgba(255, 0, 0, 0),
          #cec9c9,
          rgba(255, 0, 0, 0)
        );
      }
    }
  }
}
</style>
